<template>
  <view class="all">
	 <view class="ceiling" :style="{ 'padding-top': statusBarHeight + 'px' }"></view>
    <searchHead goback='gobackF' :title='titleText' searchTip='searchimg'></searchHead>

    <view class="exponent">
      <!-- 沪深指数 -->
      <view class="carousel">

        <view class="uni-margin-wrap bb20">
          <swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
            :duration="duration">
			
			<swiper-item>
			  <view class="swiper-item uni-bg-green">
			    <view class="swiper-left">
			      <view class="content" @click="toInfo(shangZheng)">
			        <p>上证指数</p>
			        <p :class="shangZheng.P>shangZheng.YC?'':'c37A037'">{{shangZheng.P}}</p>
			        <p>{{(shangZheng.P-shangZheng.YC).toFixed(2)}} {{((shangZheng.P-shangZheng.YC) *10/shangZheng.YC *10) .toFixed(2)}}%</p>
			      </view>
			    </view>
			    <view class="swiper-center" @click="toInfo(chuangYe)">
			      <view class="content">
			        <p>创业板指</p>
			        <p :class="chuangYe.P>chuangYe.YC?'':'c37A037'">{{chuangYe.P}}</p>
			        <p>{{(chuangYe.P-chuangYe.YC).toFixed(2)}} {{((chuangYe.P-chuangYe.YC) *10/chuangYe.YC *10) .toFixed(2)}}%</p>
			      </view>
			    </view>
			    <view class="swiper-right" @click="toInfo(shenZheng)">
			      <view class="content">
			        <p>深证成指</p>
			        <p :class="shenZheng.P>shenZheng.YC?'':'c37A037'">{{shenZheng.P}}</p>
			        <p>{{(shenZheng.P-shenZheng.YC).toFixed(2)}} {{((shenZheng.P-shenZheng.YC) *10/shenZheng.YC *10) .toFixed(2)}}%</p>
			      </view>
			    </view>
			  </view>
			</swiper-item>

            <swiper-item>
              <view class="swiper-item uni-bg-red">
                <view class="swiper-left" @click="toInfo(daoQiongSi)">
                  <view class="content">
                    <p>道琼斯</p>
                    <p :class="daoQiongSi.P>daoQiongSi.YC?'':'c37A037'">{{daoQiongSi.P}}</p>
                    <p>{{(daoQiongSi.P-daoQiongSi.YC).toFixed(2)}} {{((daoQiongSi.P-daoQiongSi.YC) *10/daoQiongSi.YC *10) .toFixed(2)}}%</p>
                  </view>
                </view>
                <view class="swiper-center" @click="toInfo(naSi)">
                  <view class="content">
                    <p>纳斯达克</p>
                    <p :class="naSi.P>naSi.YC?'':'c37A037'">{{naSi.P}}</p>
                    <p>{{(naSi.P-naSi.YC).toFixed(2)}} {{((naSi.P-naSi.YC) *10/naSi.YC *10) .toFixed(2)}}%</p>
                  </view>
                </view>
                <view class="swiper-right" @click="toInfo(biaoPu)">
                  <view class="content">
                    <p>标普500</p>
                    <p :class="biaoPu.P>biaoPu.YC?'':'c37A037'">{{biaoPu.P}}</p>
                    <p>{{(biaoPu.P-biaoPu.YC).toFixed(2)}} {{((biaoPu.P-biaoPu.YC) *10/biaoPu.YC *10) .toFixed(2)}}%</p>
                  </view>
                </view>
              </view>
            </swiper-item>

          </swiper>
        </view>
        <view class="pandect mb20">
          <view class="pandect-title">市场总览</view>
          <view class="qiun-columns">
            <view class="qiun-charts">
              <!-- <canvas canvas-id="canvasColumn" id="canvasColumn" class="charts" @touchstart="touchColumn"></canvas> -->
              <canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" @touchstart="touchLineA" @touchmove="moveLineA"
                @touchend="touchEndLineA">
              </canvas>
            </view>
          </view>
        </view>

      </view>
    </view>
  </view>
</template>

<script>
  // import uCharts from '@/components/u-charts/u-charts.js';
  // var _self;
  // var canvaColumn = null;
  // 新的折线图 
  import uCharts from '@/js_sdk/u-charts/u-charts/u-charts.js';
  var _self;
  //var canvaCandle = null;
  var canvaLineA = null;

  import searchHead from "@/component/searchHead/searchHead.vue"
  export default {
    components: {
      searchHead,
    },
    data() {
      return {
        statusBarHeight: getApp().globalData.statusBarHeight, //状态栏高度
        tabIndex: 0,
        titleText: '上证指数',
        // 顶部幻灯片
        indicatorDots: true,
        autoplay: false,
        interval: 2000,
        duration: 500,

        // 指数
        shangZheng: {},
        chuangYe: {},
        shenZheng: {},
        daoQiongSi: {},
        naSi: {},
        biaoPu: {},
        // 新的 chart 图表
        name: "",
        code: "",

        shares: {},
        timer: "",
        list: [{
          name: '当日'
        }, {
          name: '五日'
        }, {
          name: '1分K'
        }, {
          name: '5分K'
        }, {
          name: '15分K'
        }, {
          name: '60分K'
        }, {
          name: '日K'
        }],
        current: 1,
        cWidth: '',
        cHeight: '',
        pixelRatio: 1,
        itemCount: 20, //x轴单屏数据密度
        sliderMax: 50,
        data: []

        // 老的 chart 图表

        // cWidth: '',
        // cHeight: '',
        // pixelRatio: 1,
        // // serverData: '',
        // serverData: {
        // 	"categories": ["2012", "2013", "2014", "2015", "2016", "2017"],
        // 	"series": [{
        // 		"name": "成交量1",
        // 		"data": [15, {
        // 			"value": 20,
        // 			"color": "#f04864"
        // 		}, 45, 37, 43, 34]
        // 	}, {
        // 		"name": "成交量2",
        // 		"data": [30, {
        // 			"value": 40,
        // 			"color": "#facc14"
        // 		}, 25, 14, 34, 18]
        // 	}]
        // }
      };
    },
    methods: {
      // 新增东西
      toInfo(data) {
        uni.navigateTo({
          url: "/pages/gzQiYe/sharesInfo?name=" + data.N + "&code=" + data.FS,
        })
      },
      getIndexShares: function() {
        this.$Request.get(this.$api.index.getIndexShares).then(res => {
          this.shares = res.data;
          this.shangZheng = this.shares[0];
          this.chuangYe = this.shares[1];
          this.shenZheng = this.shares[2];

        })
      },
      getIndexShares2: function() {
        this.$Request.get(this.$api.index.getIndexShares2).then(res => {
          this.daoQiongSi = res.daoQiongSi;
          this.naSi = res.naSi;
          this.biaoPu = res.biaoPu;

        })
      },
      // 新的 获取指数
      getSharesQuery: function() {
        this.$Request.post(this.$api.index.getSharesQuery, {
          code: this.code,
        }).then(res => {
          this.shares = res.data;
        })
      },
      //折线图当日
      getServerDataLine() {
        let that = this;
        let period = 'D';

        this.$Request.post(this.$api.index.getDayLineV2, {
          code: this.code,
          period: period
        }).then(res => {
          let categories = [];
          let series = [];
          this.data = res.data;
          if (this.data == null || this.data.length == 0) {
            return
          }
          res.data.forEach(function(item, index) {
            if (that.current == 0) {
              categories.push(item.D.substring(10, item.D.length));
            } else {
              categories.push(item.D.substring(5, 10));
            }
            series.push(item.C.toFixed(2));
          })
          let LineA = {
            categories: [],
            series: []
          };
          LineA.categories = categories;
          LineA.series = [{
            "data": series,
            "name": "价格",
            "itemStyle": {
              "normal": {
                "lineStyle": {
                  color: "red"
                }
              }
            }
          }];
          _self.showLineA("canvasLineA", LineA);
        })

      },
      showLineA(canvasId, chartData) {
        console.log(chartData);
        canvaLineA = new uCharts({
          $this: _self,
          canvasId: canvasId,
          type: 'line',
          fontSize: 11,
          legend: {
            show: true
          },
          dataLabel: true,
          background: '#FFFFFF',
          pixelRatio: _self.pixelRatio,
          categories: chartData.categories,
          series: chartData.series,
          animation: true,
          dataPointShape: false,
          enableScroll: true, //开启图表拖拽功能
          xAxis: {
            disableGrid: true,
            type: 'grid',
            itemCount: 5,
            scrollShow: true,
            scrollAlign: 'right',
            scrollBackgroundColor: '#F7F7FF',
            scrollColor: '#DEE7F7',
            labelCount: 5,
            itemCount: 200,
          },
          yAxis: {
            type: 'value',
            scale: true,
            gridColor: '#CCCCCC',
            format: (val) => {
              return val.toFixed(2)
            }
          },
          width: _self.cWidth * _self.pixelRatio,
          height: _self.cHeight * _self.pixelRatio,
          dataLabel: false,
          extra: {
            line: {
              type: 'curve',
              opacity: 0.2,
              addLine: true,
              width: 2,
              gradient: false
            }
          }
        });

      },
      touchLineA(e) {
        canvaLineA.scrollStart(e);
      },
      moveLineA(e) {
        canvaLineA.scroll(e);
      },
      touchEndLineA(e) {
        canvaLineA.scrollEnd(e);
        //下面是toolTip事件，如果滚动后不需要显示，可不填写
        canvaLineA.showToolTip(e, {
          format: function(item, category) {
            return category + ' ' + item.name + ':' + item.data
          }
        });
      },

      // 老的 获取指数

      // getServerData() {
      // 	uni.request({
      // 		url: 'https://www.ucharts.cn/data.json',
      // 		data: {},
      // 		success: function(res) {
      // 			console.log(res.data.data)
      // 			//下面这个根据需要保存后台数据，我是为了模拟更新柱状图，所以存下来了
      // 			_self.serverData = res.data.data;
      // 			let Column = {
      // 				categories: [],
      // 				series: []
      // 			};
      // 			//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
      // 			Column.categories = res.data.data.Column.categories;
      // 			Column.series = res.data.data.Column.series;
      // 			_self.showColumn("canvasColumn", Column);
      // 		},
      // 		fail: () => {
      // 			_self.tips = "网络错误，小程序端请检查合法域名";
      // 		},
      // 	});
      // },
      // changeTab(index) {
      // 	this.tabIndex = index
      // },
      // showColumn(canvasId, chartData) {
      // 	canvaColumn = new uCharts({
      // 		$this: _self,
      // 		canvasId: canvasId,
      // 		type: 'column',
      // 		legend: {
      // 			show: true
      // 		},
      // 		fontSize: 11,
      // 		background: '#FFFFFF',
      // 		pixelRatio: _self.pixelRatio,
      // 		animation: true,
      // 		categories: chartData.categories,
      // 		series: chartData.series,
      // 		xAxis: {
      // 			disableGrid: true,
      // 		},
      // 		yAxis: {
      // 			//disabled:true
      // 		},
      // 		dataLabel: true,
      // 		width: _self.cWidth * _self.pixelRatio,
      // 		height: _self.cHeight * _self.pixelRatio,
      // 		extra: {
      // 			column: {
      // 				type: 'group',
      // 				width: _self.cWidth * _self.pixelRatio * 0.45 / chartData.categories.length
      // 			}
      // 		}
      // 	});

      // },
      // touchColumn(e) {
      // 	canvaColumn.showToolTip(e, {
      // 		format: function(item, category) {
      // 			if (typeof item.data === 'object') {
      // 				return category + ' ' + item.name + ':' + item.data.value
      // 			} else {
      // 				return category + ' ' + item.name + ':' + item.data
      // 			}
      // 		}
      // 	});
      // },
    },
    onShow() {
      this.getIndexShares()
      this.getIndexShares2()

      _self = this;
      this.timer = setInterval(function() {
        _self.getSharesQuery();
      }, 2000);
    },
    onHide() {
      clearInterval(this.timer)
    },
    onUnload() {
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
    },
    onLoad(e) {
      if (e.c == 2) {
        this.titleText = '上证50股'
      }

      //this.checkLogin();
      this.name = e.name;
      this.code = e.code;
      this.getSharesQuery();

      _self = this;
      this.cWidth = uni.upx2px(750);
      this.cHeight = uni.upx2px(500);
      this.cHeight2 = uni.upx2px(200);
      this.getServerDataLine();
      // this.addSharesStop();
    }
  }
</script>

<style lang="scss" scoped>
  .all {
    background-color: #FFFFFF;
  }

  .bb20 {
    border-bottom: 20rpx solid #F2F2F2;
  }

  .pandect-title {
    background-color: #FFFFFF;
    padding-left: 33rpx;
    line-height: 80rpx;
    height: 80rpx;
    border-bottom: 1rpx solid #EDEDED;
    margin-bottom: 20rpx;
  }

  .carousel {
    .uni-margin-wrap {

      padding: 20rpx;
      box-sizing: border-box;
      background-color: #FFFFFF;
      // box-shadow: 0 10rpx 5rpx #dfebff;

      .swiper-item {
        width: 100%;
        height: 100%;
        background-color: #FFFFFF;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
      }

      .content {
        p {
          text-align: center;
          color: red;

          &:first-child {
            color: #000;
            font-size: 32rpx;
          }

          &:nth-child(2) {
            font-size: 36rpx;
          }

          &:last-child {
            font-size: 12rpx;
          }
        }

      }
    }

    .qiun-padding {
      padding: 2%;
      width: 96%;
    }

    .qiun-wrap {
      display: flex;
      flex-wrap: wrap;
    }

    .qiun-rows {
      display: flex;
      flex-direction: row !important;
    }

    .qiun-columns {
      display: flex;
      flex-direction: column !important;
    }

    .qiun-common-mt {
      margin-top: 10upx;
    }

    .qiun-bg-white {
      background: #FFFFFF;
    }

    .qiun-title-bar {
      width: 96%;
      padding: 10upx 2%;
      flex-wrap: nowrap;
    }

    .qiun-title-dot-light {
      border-left: 10upx solid #0ea391;
      padding-left: 10upx;
      font-size: 32upx;
      color: #000000
    }

    .qiun-charts {
      width: 750upx;
      height: 500upx;
      background-color: #FFFFFF;
    }

    .charts {
      width: 750upx;
      height: 500upx;
      background-color: #FFFFFF;
    }
  }

  .trading {
    .dynamicTab {
      height: 80rpx;
      padding: 18rpx 0rpx 24rpx;
      margin-bottom: 20rpx;

      .tabItem {
        flex: 0 1 20%;
        font-size: 28rpx;
        font-weight: 500;
        color: #333333;
        line-height: 64rpx;
        background: #F5F5F5;

        &.active {
          color: #E23232;
          position: relative;
          border: 1px solid #FF0000;
          border-radius: 4px;


        }

      }
    }

    .table_list {
      width: 100%;
      background-color: #FFFFFF;
      position: relative;

      .thead {

        .tr {
          border-bottom: 1rpx solid #EDEDED;
          color: #666666;
          padding: 29rpx 28rpx 31rpx 31rpx;
          width: 100%;

          view:nth-child(1) {
            text-align: start;
          }

          view {
            flex: 0 1 25%;
            text-align: end;
          }
        }
      }

      .tbody {
        width: 100%;
        min-height: calc(100vh - 446rpx);

        .tr {
          border-bottom: 1rpx solid #EDEDED;
          padding: 18rpx 29rpx 16rpx 34rpx;
          width: 100%;
          height: 110rpx;

          .C999999 {

            color: #999999;
          }

          view:nth-child(1) {
            text-align: start;
          }

          view {
            height: 100%;
            flex: 0 1 25%;
            text-align: end;

          }

          .lh74 {

            line-height: 74rpx;
          }
        }
      }

      .tfoot {
        height: 110rpx;
        line-height: 110rpx;
        text-align: center;
      }
    }


  }
</style>
